import React, {useEffect, useState} from 'react'
import {
    Pagination, Breadcrumb, Button, Space, Input, Form, Row, Col, Modal, Checkbox, Table, Select
} from 'antd'
import common from "../../common"
import moment from 'moment'
import Toolbar from "../../components/toolbar";

function LineUser(props) {
    const [newsList, setNewsList] = useState([])
    let [pagination, setPagination] = useState({
        total: 0,
        page: 1,
        limit: 10,
    })
    let [users, setUsers] = useState([]);
    const {Option} = Select;
    let [category, setCategory] = useState({name:1})

    const [editModalVisible, setEditModalVisible] = useState(false)
    const [editForm] = Form.useForm();

    const columns = [
        {
            title: '事件',
            dataIndex: 'eventName',
        },
        {
            title: '负责人',
            dataIndex: 'userName',
        },
        {
            title: '操作',
            align: "center",
            width: 180,
            fixed: "right",
            render: (text, record, index) => {
                return (
                    <>
                        <Button size={'small'} type={'link'} onClick={() => {
                            setEditModalVisible(true)
                            editForm.setFieldsValue(record)
                        }}>编辑</Button>


                        <Button type="link" onClick={() => {
                            common.confirm("确定要删除吗?", () => {
                                del(record.id)
                            })
                        }}>删除</Button>
                    </>
                )
            }
        }
    ];

    const init = () => {
        let params = {
            lineId:props.match.params.id,
            page: pagination.page,
            limit: pagination.limit,
        }
        common.ajax("GET", "/front/lineUser/list", params).then(data => {
            setNewsList(data.list)
            setPagination(data.pagination)
        })
        console.log(newsList)
    }

    const getline = () => {
        let params = {
            id:props.match.params.id,
        }
        common.ajax("GET", "/front/line/list", params).then(data => {
            setCategory(data.list[0])
        })
    }

    const getUsers = () => {
        common.ajax("GET", "/passport/user/list?limit=100").then(data => {
            setUsers(data.list)
        })
    }
    const update = (data) => {
        common.loadingStart()
        common.ajax("POST", "/front/lineUser/update", data).then(res => {
            common.toast("操作成功")
            setEditModalVisible(false)
            init()
        }).finally(common.loadingStop)
    }
    const del = (id) => {
        common.loadingStart()
        common.ajax("POST", "/front/lineUser/delete", {id}).then(res => {
            common.toast("操作成功")
            init()
        }).finally(common.loadingStop)
    }
    useEffect(() => {
        init()
        getUsers()
        getline()
    }, [pagination.page, pagination.limit])


    return (
        <div className="News">

            <Breadcrumb>
                <Breadcrumb.Item>示例</Breadcrumb.Item>
                <Breadcrumb.Item>文章管理</Breadcrumb.Item>
                <Breadcrumb.Item>{category.name}</Breadcrumb.Item>
            </Breadcrumb>



            <div style={{padding: 25, minHeight: 600}}>
                <Toolbar>
                    <div>
                        <Button type="primary" onClick={() => {
                            props.history.push('/line')
                        }}>返回</Button>
                    </div>
                </Toolbar>

                <Table rowKey={columns => columns.eventId} dataSource={newsList} columns={columns} pagination={false}/>

                {pagination.total < 5 ? '' :
                    <Pagination
                        style={{marginTop: 25}}
                        pageSizeOptions={['10', '20', '50', '100']}
                        onChange={(page, limit) => {
                            setPagination({...pagination, page, limit})
                        }}
                        onShowSizeChange={(page, limit) => {
                            setPagination({...pagination, page, limit})
                        }}
                        showTotal={total => `共${total}条`}
                        total={pagination.total}
                        defaultCurrent={pagination.page}
                        current={pagination.page}
                        defaultPageSize={pagination.limit}
                        showSizeChanger
                        showQuickJumper
                    />}

            </div>


            <Modal title="编辑" footer={false} maskClosable={false} visible={editModalVisible} onCancel={() => {
                setEditModalVisible(false)
            }}
            >
                <Form
                    form={editForm}
                    onFinish={(values) => {
                        // console.log(values)
                        update(values)
                    }}
                    labelCol={{span: 4}}
                    wrapperCol={{span: 20}}
                >
                    <Form.Item
                        hidden={true}
                        name="lineId"
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        hidden={true}
                        name="eventId"
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        hidden={true}
                        name="id"
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="负责人"
                        name="userId"
                        rules={[{required: true, message: '请选择负责人'}]}
                    >
                        <Select  placeholder="姓名" >
                            {users.map(item => {
                                return (<Option key={item.id} value={item.id} > {item.name}</Option>)
                            })}
                        </Select>
                    </Form.Item>

                    <Form.Item wrapperCol={{offset: 4, span: 20}}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>

        </div>
    );
}

export default LineUser
